import React,{ useState } from "react";
import '../assets/css/register.css'
import { Register } from '../request/api'
import { Toast } from "antd-mobile";
import { useNavigate } from 'react-router-dom'
export default function Registers() {
    let nav = useNavigate()
    const [user,setuser] = useState({
        phone: '',
        nickname: '',
        password: ''
    })
    function refister(type, e) {
        setuser({
            ...user,
            [type]: e.target.value
        })
    }
    function yesRegister() {
        if (
            user.password === "" ||
            user.phone === "" ||
            user.nickname === ""
        ) {
            Toast.show({
                content: "不能为空",
            });
            return
        }
        let str = /^1[3-9]\d{9}$/;

        if (!str.test(user.phone)) {
            Toast.show({
                content: "手机号格式不对",
            });

            return;
        }
        Register(user).then((res) => {
            console.log(res);
            Toast.show({
              content: res.data.msg,
            });
            if (res.data.code === 200) {
                nav('/login')
            }
          });
    }
    return (<div className="wrap">
        <header>
            <h1>注册</h1>
        </header>
        <div className="login-bg">
            <div className="login-con">
                <div>
                    <img src={require('../assets/img/piclogoorange.png')} alt="" />
                </div>
                <form action="">
                    <div>
                        <input type="tel" value={user.phone} placeholder="手机号" onChange={refister.bind(this, 'phone')} />
                    </div>
                    <div>
                        <input type="tel" value={user.nickname} placeholder="用户名" onChange={refister.bind(this, 'nickname')} />
                    </div>
                    <div className="yzm">
                        <input type="password" value={user.password} id="yzm" placeholder="密码" onChange={refister.bind(this, 'password')} />
                    </div>
                </form>
                <div className="login-btn" onClick={(e) => yesRegister(e)}>注 册</div>
            </div>
        </div >
    </div >)
}
